<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>摄影师招募</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="css/mui.min.css">
	<link rel="stylesheet"  type="text/css" href="css/iconfont.css">
	<style type="text/css">
		#list {
			/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
			margin-top: -1px;
		}
	</style>
</head>

<body>

<style>
	* {touch-action: pan-y;}
	.mui-control-content {background-color: white;min-height: 50rem;}
	.mui-control-content .mui-loading {margin-top: 50px;}
	.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar{background-color:#ff9400;}
	.mui-table-view .mui-media-object{height: 80px;max-width: 110px;}
	.mui-bar-nav{background-color: #e94709;}
	.top-return {position: absolute;width: 10%;top: 0.1875rem;}
	.top-return img{width: 75%;}
	.mui-bar-nav .mui-title{color: #FFFFFF;}
	.top-logo {position: absolute;width: 10%;left: 28%;top: 0.1875rem;}
	.top-logo img{width: 90%;}
	.top-menu {position: absolute;width: 10%;right: 5%;top: 0.1875rem;}  .top-menu img{width: 75%;}
	/* 公共部分end */
	.mui-table-view .mui-media, .mui-table-view .mui-media-body{line-height: 2rem;}
	.mui-slider-indicator.mui-segmented-control .mui-control-item {border-left:1px solid #c1c1c1 ;border-bottom:1px solid #c1c1c1 ;padding: 1px;color: #585858;}
	.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{border-bottom:3px solid #e94709 ;color: #585858;}
	.addtime{padding-top: 10px;font-size: 10px;}
	.mui-table-view .mui-media-object.mui-pull-left{margin-right: 25px;}
	.mui-content>.mui-table-view:first-child{margin: 0;}
	.mui-content ul{height: 6.5rem;}
	.entry-pro {font-weight: 500;font-size: 15px;color: #000000;background-color: #FFFFFF;padding: 10px 0 1px 5%;}
	.entry-message{position: absolute;width: 100%;height: 80%;font-weight: 500;font-size: 15px;color: #000000;background-color: #FFFFFF;padding: 10px 5% 1px 5%;}
	.entry-message input{height: 30px;}
	.entry-message p{margin-top: 3%;margin-bottom: 1px;}
	.entry-message input::-webkit-input-placeholder{font-size:14px;color: #bcbcbc;}
	.entry-select{position: absolute;width: 95%;height: 4%;border: 1px solid #bcbcbc;margin-bottom: 10px;}
	.mui-btn-block{font-size: 14px;margin: 0;padding: 0;padding-left: 4%;line-height: 25px;color: #000000;}
	.mui-btn-block option:first-child{font-size: 14px;margin: 0;padding: 0;color: #bcbcbc;}
	.circle{width: 15px;height: 15px;background-color: #595757;border-radius: 50%;display: inline-block;margin-right: 30px;float: right;text-align: center;line-height: 5px;color:#595757 ;letter-spacing: 0;}
	.circle-active{background-color: #e94709;color: #e94709;}
	.mui-content ul{height: 10rem;border: 1px solid #BCBCBC;}
	.entry-message .phone-code{float: right;margin-right: 5%;background-color:#e94709 ;color: #FFFFFF;border-radius: 4px;font-size: 10px;width: 23%;text-align: center;}
	.id-card{position: absolute;width: 95%;height: 6rem;overflow: hidden;}
	.id-card .positive{position: absolute;left: 0;width: 45%;height: 100%;border: 1px solid #bcbcbc;}
	.id-card .reverse{position: absolute;right: 0;width: 45%;height: 100%;border: 1px solid #bcbcbc;margin-right: 5%;}
	.id-card img{position: absolute;top: 0;width: 45%;z-index: 10;margin: 10% 30%;}
	#reverse{position: absolute;height: 5rem;width: 10rem;top: 0;z-index: 20;opacity: 0;}
	#positive{position: absolute;height: 5rem;width: 10rem;top: 0;z-index: 20;opacity: 0;}
	#positive-img{margin:0;z-index: 15;width: 100%;height: 100%;}
	#reverse-img{margin:0;z-index: 15;width: 100%;height: 100%;}
	.mui-btn {display: block;width: 120px;margin: 10px auto;}
	.preview ul {margin: 0;padding: 0;}
	.preview ul li {position: relative;display: inline-block;margin-top: 10px;margin-bottom: 10px;margin-right: 10px;float: left;list-style: none;}
	.preview ul li img {width: 60px;height: 60px;border-radius: 5px;}
	.preview ul li input {display: inline-block;position: absolute;width: 50px;height: 50px;left: 0;top: 0;opacity: 0;}
	.del {display: inline-block;position: absolute;top:6px;right: 0px;width: 12px;height: 2px;background: #ED544D;line-height: 0;font-size: 0;vertical-align: middle;-webkit-transform: rotate(45deg);}
	.del:after {content: "/";display: block;width: 12px;height: 2px;background: #ED544D;-webkit-transform: rotate(-90deg);}
	.show{display: block;}
	.hide{display: none;}
</style>
<!-- 公共头部start -->
<header class="mui-bar mui-bar-nav">
	<a class="top-return mui-action-back"><img src="images/return.png" ></a>
	<a class="top-logo"><img src="images/logo.png" ></a>
	<h1 class="mui-title">
		Aitimt 爱计时</h1>
	<a href="#popover" id="openPopover" class="top-menu" ><img src="images/menu.png" ></a>
	<div id="popover" class="mui-popover">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell"><a href="#">Item1</a></li>
			<li class="mui-table-view-cell"><a href="#">Item2</a></li>
			<li class="mui-table-view-cell"><a href="#">Item3</a></li>
			<li class="mui-table-view-cell"><a href="#">Item4</a></li>
			<li class="mui-table-view-cell"><a href="#">Item5</a></li>
		</ul>
	</div>
</header>
<!-- 公共头部end -->
<div class="mui-content">

	<div style="font-size: 20px;color: #e94709;margin:3% 0 3% 5%;font-weight: 500;" >
		注册摄影师
		<div class="circle"></div>
		<div class="circle">........</div>
		<div class="circle circle-active">........</div>
	</div>
	<div class="entry-message">
		<form  action="" method="post" id="formdata">
			<div id="recruit1" class="show">
				<p>姓名*:</p>
				<input type="text" name="name" placeholder="请输入姓名" id="name" value="" />
				<p>昵称*:</p>
				<input type="text" name="nickname" placeholder="请输入昵称" id="nickname" value="" />
				<p>手机号码*:</p>
				<input type="text" name="phone" placeholder="请输入手机号码" id="phone" value="" style="width:70%;"/>
				<div class="phone-code">获取验证码</div>
				<p>验证码*:</p>
				<input type="text" name="code" placeholder="请输入验证码" id="code" value="" />
			</div>
			<div id="recruit2" class="hide">
				<p>身份证(拍照上传正反两面)*:</p>
				<div class="id-card">
					<div class="positive">
						<img id="positive-img" >
						<input  type="file" name="positive" id="positive" onchange="positiveUpload();" accept="image/*" capture="user" multiple="multiple"/>
						<img src="images/positive.png" />
					</div>
					<div class="reverse">
						<img id="reverse-img" >
						<input  type="file" name="reverse" id="reverse" onchange="reverseUpload();" accept="image/*" capture="user" multiple="multiple"/>
						<img src="images/reverse.png"/>
					</div>

				</div>

				<p style="margin-top: 35%;">邮箱*:</p>
				<input type="text" name="email" placeholder="请输入邮箱" id="email" value="" />
				<p>常住城市*:</p>
				<input type="text" name="city" placeholder="请填写城市(如广州市)" id="city" value=""/>
				<p>擅长拍摄项目*:</p>
				<input type="text" name="pro" placeholder="如路跑/越野/骑车等" id="pro" value="" />
			</div>
			<div id="recruit3" class="hide">
				<p>相机(机身)型号*:</p>
				<input type="text" name="camera" placeholder="多台设备请用逗号隔开" id="camera" value="" />

				<p>镜头型号*:</p>
				<input type="text" name="lens" placeholder="多台设备请用逗号隔开" id="lens" value="" />
				<p>拍摄经历*:</p>
				<input type="text" name="experience" placeholder="请输入拍摄经历" id="experience" value=""/>
				<div style="margin-top: 16px;margin-bottom: 10px;color:#8f8f94 ;">
					<span class="title">样片上传(可上传多张)*</span>
					<span id="picnum" style="float: right;margin-right: 20px;font-size: 12px; color: #8f8f94;">0/5</span>
				</div>
				<div class="preview" style="background-color: #ffffff;height: 70px;width: 100%;padding-left: 15px;padding-right: 15px;">
					<ul class="row mui-input-row">
						<li>
							<input id="file"  type="file" name="upload" accept="image/*"
								   onchange="setImagePreviews();"  multiple="true" />
							<img src="images/add.png"/>
						</li>
					</ul>
				</div>
			</div>
		</form>
	</div>
</div>
<!-- 公共底部start -->
<nav class="mui-bar mui-bar-tab" id="recruitBtn">
	<a class="mui-tab-item mui-active " style="background: #e94709;color: #FFFFFF;" data-value=2>
		<span class="mui-tab-label">下一步</span>
	</a>
</nav>
<!-- 公共底部end -->
<script src="js/mui.min.js"></script>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
    });
    mui('.mui-bar').on('tap','a',function(){
        var value = $(this).attr('data-value');
        var result='';
        if (value==1){
            document.getElementById('recruit1').className='show';
            document.getElementById('recruit2').className='hide';
            document.getElementById('recruit3').className='hide';
            result='<a class="mui-tab-item mui-active " style="background: #e94709;color: #FFFFFF;" data-value=2 ><span class="mui-tab-label">下一步</span></a>';
            document.getElementById('recruitBtn').innerHTML=result;
        }else if (value==2){
            document.getElementById('recruit1').className='hide';
            document.getElementById('recruit2').className='show';
            document.getElementById('recruit3').className='hide';
            result='<a class="mui-tab-item" style="color: #000;" data-value=1 ><span class="mui-tab-label">上一步</span></a><a class="mui-tab-item mui-active " style="background: #e94709;color: #FFFFFF;" data-value=3 ><span class="mui-tab-label">下一步</span></a>';
            document.getElementById('recruitBtn').innerHTML=result;
        } else if (value==3){
            document.getElementById('recruit1').className='hide';
            document.getElementById('recruit2').className='hide';
            document.getElementById('recruit3').className='show';
            result='<a class="mui-tab-item" style="color: #000;" data-value=2 ><span class="mui-tab-label">上一步</span></a><a class="mui-tab-item mui-active " style="background: #e94709;color: #FFFFFF;" data-value=4 ><span class="mui-tab-label">提交</span></a>	';
            document.getElementById('recruitBtn').innerHTML=result;
        } else if (value==4){}
    })
    function positiveUpload() {
        var $pic = document.querySelector("#positive");//上传出发按钮
        var $img = document.querySelector("#positive-img");

        var file = $pic.files[0];//获取file对象单张
        var reader = new FileReader();//创建filereader对象
        reader.readAsDataURL(file);//转换数据
        reader.onload = function (e) {//加载ok时触发的事件
            $img.removeAttribute("src");

            $img.setAttribute("src", e.target.result);
            var $test = document.querySelector("#positive-img");
        };
    }
    function reverseUpload() {
        var $pic = document.querySelector("#reverse");//上传出发按钮
        var $img = document.querySelector("#reverse-img");

        var file = $pic.files[0];//获取file对象单张
        var reader = new FileReader();//创建filereader对象
        reader.readAsDataURL(file);//转换数据
        reader.onload = function (e) {//加载ok时触发的事件
            $img.removeAttribute("src");

            $img.setAttribute("src", e.target.result);
            var $test = document.querySelector("#reverse-img");
        };
    }

    function submit(){
        var formData = new FormData();
        formData.append('name',name);
        if(uploadfile.length>0){
            for(var i=0;i<uploadfile.length;i++){
                formData.append("upload", uploadfile[i]); // 文件对象
            }
        }
        var url=11111;
        jQuery.ajax({
            url: url,
            type: 'post',
            async: false,
            contentType:false,
            processData: false,
            data:formData,
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            success: function (data) {
                console.log(JSON.stringify(data));
                mui.toast("提交成功！",{ duration:'500', type:'div' });
            },
            error: function (error) {
                console.log(JSON.stringify(error));
                mui.toast('页面出错',{ duration:'500', type:'div' });
            }
        });
    }
    var uploadfile = [];
    function setImagePreviews() {
        var docObj = document.getElementById("file");
        var piclength = uploadfile.length;
        var fileList = docObj.files;
        if((Number(piclength) + Number(fileList.length)) > 5) {
            mui.alert('最多上传五张');
        } else {
            document.getElementById("picnum").innerText=Number(piclength) + Number(fileList.length)+'/5';
            for(var i = 0; i < fileList.length; i++) {
                uploadfile.push(docObj.files[i]);
                var picid = Number(piclength) + Number(i);
                var reader = new FileReader();
                reader.readAsDataURL(docObj.files[i]);
                reader.onload = function(e) {
                    // 图片base64化
                    var newUrl = this.result;
                    $(".preview ul").prepend("<li onclick='delImg(this)'><img src='" + newUrl + "' /><span class='del'></span></li>");
                };

            }
        }
    }
    function delImg(obj){
        var list =document.getElementsByTagName('li');
        for(var i=0;i<list.length;i++){
            list[i].index=i;
        }
        var idx=2-obj.index;
        var ul=obj.parentNode;
        var btnArray=['是','否'];
        mui.confirm("确定要删除此图?",function(e){
            if(e.index==1){
                ul.removeChild(obj);
                uploadfile.splice(idx,1);
                document.getElementById("picnum").innerText=Number(uploadfile.length)+'/5';
            }
        },{"buttons":btnArray})
    }
</script>

</body>

</html>
